import React from 'react'
import {Input, Row, Col, InputNumber, Select, DatePicker, Form} from 'antd'
import './cms.less'
const FormItem = Form.Item;

//高级搜索的表单中的下拉多选字段(用于选项多于3个时)
class SelectGroup extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            multiple: props.multiple || false,
            handle: props.handle,
            options:props.options,
            val: []
        };
        this.changeHandle = this.changeHandle.bind(this);
        this.reset = this.reset.bind(this);
    }
    componentWillReceiveProps(props,next){
      this.setState({
        name: props.name,
        label: props.label,
        multiple: props.multiple || false,
        handle: props.handle,
        options:props.options
      });
    }
    changeHandle (value) {
        let dataType = this.props.dataType
        this.setState({val: value});
        if(dataType === 'number'){
            if((value instanceof Array) && value.length>0){
                this.state.handle(this.state.name, value.map(x => parseInt(x)));
            }else if((typeof value === 'string') && value.length>0){
                this.state.handle(this.state.name, parseInt(value));
            }else{
                this.state.handle(this.state.name, null);
            }
        }else{
            this.state.handle(this.state.name, value);
        }
    }

    reset () {
        this.setState({val: []});
        this.state.handle(this.state.name, null);
    }

    render () {
        var {options} = this.state;
        let idVal = 'area' + Math.random();

        if(!(options instanceof Array)){
            return null;
        }

        return (
            <div style={{position: 'relative'}} id={idVal}>
                <label className="uk_label">{this.state.label}:</label>
                <Row className="uk_mgb_24">
                    <Col span={24}>
                        <Select
                            multiple={this.state.multiple}
                            name={this.state.name}
                            style={{width: '100%'}}
                            value={this.state.val}
                            placeholder={this.state.label}
                            onChange={this.changeHandle}
                            getPopupContainer={() => document.getElementById(idVal)}
                        >
                            {options.map(function (item, key) {
                                return <Select.Option key={key + ''} value={item.value + ''}>{item.text}</Select.Option>
                            })}
                        </Select>
                    </Col>
                </Row>
            </div>
        );
    }
}
//高级搜索的表单中的文本字段
class TextInput extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            name: props.name,
            label: props.label,
            text: props.text,
            handle: props.handle,
            val: ''
        };
        this.changeHandle = this.changeHandle.bind(this);
        this.reset = this.reset.bind(this);
    }

    changeHandle (e) {
        this.setState({val: e.target.value});
        this.state.handle(this.state.name, e.target.value);
    }

    reset () {
        this.setState({val: ''});
        this.state.handle(this.state.name, '');
    }

    render () {
        return <div>
            <label className="uk_label"
            >{this.state.label}:</label>
            <Row className="uk_mgb_24">
                <Col span={24}>
                    <Input name={this.state.name} value={this.state.val} placeholder={this.state.text}
                           onChange={this.changeHandle}/>
                </Col>
            </Row>
        </div>
    }
}
//搜索的表单中的日期类型字段
class DateCompare extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
          name: props.name,
          label: props.label,
          text: props.text,
          handle: props.handle,
          val: '',
        };
        this.fromChange = this.fromChange.bind(this);
        this.reset = this.reset.bind(this);
    }

    fromChange (date, dateString) {
        this.setState({val: dateString || ''});
        this.state.handle(this.state.name, this.state.val);
    }
    reset () {
      this.setState({val: ''});
      this.state.handle(this.state.name, '');
    }

    render () {
        var optData = this.state.val;
        var options = this.state.options;
        return (
            <div>
                <label className="uk_label">{this.state.label}:</label>
                <Row>
                    <Col span={24}>
                        <FormItem wrapperCol={{span: 24}} style={{marginBottom: '5px', paddingRight:'5px'}}>
                            <DatePicker onChange={this.fromChange} placeholder={this.state.text} size={'small'} style={{width:'100%'}} />
                        </FormItem>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default {
    SelectGroup,
    DateCompare,
    TextInput,
}
